<template>
	<view>
		<action-bar backTitle="返回" title="账本用户"></action-bar>
		<view class="flex padding">
			<button @click="turn_to_code_page()" class="cu-btn bg-red">邀请码</button>
		</view>
		<scroll-view scroll-y="true">
			<!-- 用户列表 -->
			<view class="cu-list menu-avatar">
				<view class="cu-item"
					  :class="modalName=='move-box-ad' ? 'move-cur':''" 
					  :data-target="'move-box-ad'"
					  @click="() => this.$message.info('是管理员哦~')">
					<view class="cu-avatar round lg" :style="'background-image: url(' + adminUser.avatarUrl + ')'">
						<view class="cu-tag badge">管理员</view>
					</view>
					<view class="content">
						<view class="text-grey" v-text="adminUser.nickname"></view>
						<view class="text-grey text-sm">
							创建时间 {{dateFormat(adminUser.createDate)}}
						</view>
					</view>
					<view class="action" style="width: 200rpx;">
						<view class="cu-tag radio bg-red sm">最近修改</view>
						<view class="text-grey text-xs" v-text="dateFormat(adminUser.currentRecordDate)"></view>
					</view>
				</view>
				<view class="cu-item" 
					  :class="modalName=='move-box-'+ index ? 'move-cur':''" 
					  v-for="(item,index) in userList" :key="index"
					  @touchstart="ListTouchStart" 
					  @touchmove="ListTouchMove" 
					  @touchend="ListTouchEnd" 
					  :data-target="'move-box-' + index">
					  
					<view class="cu-avatar round lg" :style="'background-image: url(' + item.avatarUrl + ')'"></view>
					<view class="content" @click="showUserUpdate(item.userId)">
						<view class="text-grey" v-text="item.nickname"></view>
						<view class="text-grey text-sm">
							加入时间 {{dateFormat(item.participantDate)}}
						</view>
					</view>
					<view class="action" style="width: 200rpx;">
						<view class="cu-tag radio bg-red sm">最近修改</view>
						<view class="text-grey text-xs" v-text="dateFormat(item.currentRecordDate)"></view>
					</view>
					<view class="move">
						<view class="bg-red" @click="deleteUser(item.id)">删除</view>
						<view class="bg-yellow" @click="transfer(item.id, item.userId)">移交账本</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {dateFormat} from '../../common/dateUtils.js'
	import {isAdmin} from '../../common/permission.js'
	export default {
		data() {
			return {
				bookId: '',
				bookUserId: null,
				modalName: null,
				initial: true,
				userList: [],
				adminUser: {}
			}
		},
		onLoad(option) {
			this.bookId = option.bookId
			this.bookUserId = option.book_user_id
			this.queryUserListByBookId()
		},
		mounted() {
			// 提示右滑更多操作
			// document.getElementsByClassName('cu-item')[0].className += ' move-cur'
			
		},
		methods: {
			dateFormat,isAdmin,
			queryUserListByBookId() {
				this.$request({
					url: `/account/users/list/${this.bookId}`
				}).then(res => {
					if (res && res.data.code == 200) {
						this.adminUser = res.data.admin
						this.userList = res.data.list
						console.log(this.adminUser);
					}
				})
			},
			
			deleteUser(id) {
				if (!id) {
					this.$message.info('用户信息加载失败')
					return
				}
				if (this.isAdmin()) {
					uni.showModal({
						title: '确定要删除吗?',
						success(res) {
							if (res.confirm) {
								this.$request({
									url: `/user/book/${id}`,
									method: 'delete'
								}).then(res => {
									if (res && res.data.code == 200) {
										// 删除成功，刷新页面
										this.queryUserListByBookId();
										this.$message.success('删除成功');
									}
								})
							}
						}
					})
				} else {
					this.$message.error('没有管理员权限')
				}
			},
			
			transfer(id, uid) {
				if (!this.isAdmin()) {
					this.$message.error('没有管理员权限')
					return
				}
				const bookUserId = this.$store.getters.id
				const bookId = this.$store.state.currentBookUserId
				if (!id || !bookId || !uid || !userId) {
					this.$message.error('数据获取失败')
					return
				}
				this.$request({
					url: '/user/transfer',
					method: 'put',
					data: {
						id: id,
						bookId: bookId,
						bookUserId: bookUserId,
						userId: uid,
					}
				}).then(res => {
					if (res && res.data.code == 200) {
						this.$message.success('操作成功')
					} else {
						this.$message.error('操作失败')
					}
				})
			},
			
			showUserUpdate(id) {
				uni.navigateTo({url: `/pages/user/update_user_permission?uid=${id}&bookId=${this.bookId}`})
			},
			
			// ListTouch触摸开始
			ListTouchStart(e) {
				this.listTouchStart = e.touches[0].pageX
			},
			
			// ListTouch计算方向
			ListTouchMove(e) {
				this.listTouchDirection = e.touches[0].pageX - this.listTouchStart > 0 ? 'right' : 'left'
			},
			
			// ListTouch计算滚动
			ListTouchEnd(e) {
				if (this.listTouchDirection == 'left') {
					this.modalName = e.currentTarget.dataset.target
				} else {
					this.modalName = null
				}
				this.listTouchDirection = null
			},
			
			// 调整到二维码显示页面 
			turn_to_code_page() {
				uni.navigateTo({url: `../code/invite?bookId=${this.bookId}`})
			}
		}
	}
</script>

<style>
	
</style>
